<template>
    <div style="width:100%;">
        <div style="padding: 50px">
            <div style="width:100%;height: 30px">
            <el-row style="float: left;">
                <el-button type="primary" size="small" icon="el-icon-edit"
                           @click="add_food_info_dialog_visible=true">添加菜品</el-button>
            </el-row>
            </div>
            <el-divider></el-divider>

            <!--            -->
            <!--            -->
            <!--            新增食品页面-->
            <!--            -->
            <!--            -->
            <el-dialog ref="add_food_info_dialog"
                        title="新增食品"
                       :visible.sync="add_food_info_dialog_visible"
                       width="30%"
                       style="min-width: 600px;height: auto"
            >
                <span>
                    <el-form ref="add_food_info_form"
                             :model="add_food_info_dialog_data"
                             label-width="120px"
                             size="mini"
                             :rules="add_food_info_dialog_rules">
                        <el-divider></el-divider>
                        <el-form-item label="选择日期:" prop="day">
                            <el-select v-model="add_food_info_dialog_data.day" prop="day">
                                <el-option label="周一" value="周一"></el-option>
                                <el-option label="周二" value="周二"></el-option>
                                <el-option label="周三" value="周三"></el-option>
                                <el-option label="周四" value="周四"></el-option>
                                <el-option label="周五" value="周五"></el-option>
                                <el-option label="周六" value="周六"></el-option>
                                <el-option label="周七" value="周七"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择时间:" prop="time">
                            <el-select v-model="add_food_info_dialog_data.time">
                                <el-option label="早餐" value="早餐"></el-option>
                                <el-option label="午餐" value="午餐"></el-option>
                                <el-option label="晚餐" value="晚餐"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="选择类别:" prop="type">
                            <el-select v-model="add_food_info_dialog_data.type">
                                <el-option label="主食" value="主食"></el-option>
                                <el-option label="大荤" value="大荤"></el-option>
                                <el-option label="小荤" value="小荤"></el-option>
                                <el-option label="素菜" value="素菜"></el-option>
                                <el-option label="汤" value="汤"></el-option>
                                <el-option label="套餐" value="套餐"></el-option>
                                <el-option label="点心" value="点心"></el-option>
                                <el-option label="水果" value="水果"></el-option>
                             </el-select>
                         </el-form-item>

                        <el-form-item label="选择营养类型:" prop="tag">
                            <el-select v-model="add_food_info_dialog_data.tag">
                                <el-option label="高盐" value="高盐"></el-option>
                                <el-option label="少盐" value="少盐"></el-option>
                                <el-option label="高脂肪" value="高脂肪"></el-option>
                                <el-option label="多蛋白质" value="多蛋白质"></el-option>
                                <el-option label="少脂肪" value="少脂肪"></el-option>
                                <el-option label="高糖" value="高糖"></el-option>
                                <el-option label="少糖" value="少糖"></el-option>
                                <el-option label="无特殊" value="无特殊"></el-option>
                             </el-select>
                         </el-form-item>
                        <el-form-item label="菜品名称:" prop="name">
                            <el-input v-model="add_food_info_dialog_data.name" placeholder="请输入【菜品名称】信息"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品价格:" prop="price">
                            <el-input v-model.number="add_food_info_dialog_data.price" placeholder="请输入【菜品名称】信息"></el-input>
                        </el-form-item>
                        <el-form-item label="是否清真:" prop="is_muslim">
                            <el-radio-group v-model="add_food_info_dialog_data.is_muslim">
                                <el-radio label="是">是</el-radio>
                                <el-radio label="否">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="add_food_info_dialog_visible=false">取 消</el-button>
                    <el-button type="primary" @click="add_food_info('add_food_info_form')">确 定</el-button>
                </span>
            </el-dialog>




            <el-row style="width: max-content;height: 50px">
                <el-col :span="24">
                    <el-radio-group v-model="calendar_data.chosen_day" size="mini" @change="handle_change_chosen_day()">
                        <el-radio-button label="周一"></el-radio-button>
                        <el-radio-button label="周二"></el-radio-button>
                        <el-radio-button label="周三"></el-radio-button>
                        <el-radio-button label="周四"></el-radio-button>
                        <el-radio-button label="周五"></el-radio-button>
                        <el-radio-button label="周六"></el-radio-button>
                        <el-radio-button label="周日"></el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>

<!--早餐列表-->
            <div style="width: 100%;display: flex;box-shadow: 10px 10px 5px #888888;height: auto;" >
                <div style="min-width: 10%;height:187px;background-color: cornflowerblue;border: 1px solid darkgray;">
                    <el-col style="height: 100%;font-size: 20px"><br><br>早<br><br>餐</el-col>
                </div>
                <div style="overflow-x: scroll;width: 100%;display: flex">
                    <template v-for="food in breakfast_list" >
                        <div style="min-width: 12%;height:150px;padding: 10px;">
                            <div style="box-shadow: 10px 10px 5px #888888;height: 130px;border: 1px solid darkgray;">
                                <div class="food_title">
                                    {{food.name}}
                                </div>
                                <div class="food_detail">
                                    食品类别：{{food.type}}<br>
                                    营养类型：{{food.tag}}<br>
                                    购买价格：{{food.price}}元<br>
                                    是否清真：{{food.is_muslim}}
                                </div>
                                <el-button size="mini" type="danger" @click="handle_food_delete(food.id)">点击删除</el-button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

<!--午餐列表-->
            <div style="width: 100%;display: flex;box-shadow: 10px 10px 5px #888888;height: auto;margin-top: 30px" >
                <div style="min-width: 10%;height:187px;background-color: cornflowerblue;border: 1px solid darkgray;">
                    <el-col style="height: 100%;font-size: 20px"><br><br>午<br><br>餐</el-col>
                </div>
                <div style="overflow-x: scroll;width: 100%;display: flex">
                    <template v-for="food in lunch_list" >
                        <div style="min-width: 12%;height:150px;padding: 10px;">
                            <div style="box-shadow: 10px 10px 5px #888888;height: 130px;border: 1px solid darkgray;">
                                <div class="food_title">
                                    {{food.name}}
                                </div>
                                <div class="food_detail">
                                    食品类别：{{food.type}}<br>
                                    营养类型：{{food.tag}}<br>
                                    购买价格：{{food.price}}元<br>
                                    是否清真：{{food.is_muslim}}
                                </div>
                                <el-button size="mini" type="danger" @click="handle_food_delete(food.id)">点击删除</el-button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

<!--晚餐列表-->
            <div style="width: 100%;display: flex;box-shadow: 10px 10px 5px #888888;height: auto;margin-top: 30px" >
                <div style="min-width: 10%;height:187px;background-color: cornflowerblue;border: 1px solid darkgray;">
                    <el-col style="height: 100%;font-size: 20px"><br><br>晚<br><br>餐</el-col>
                </div>
                <div style="overflow-x: scroll;width: 100%;display: flex">
                    <template v-for="food in dinner_list" >
                        <div style="min-width: 12%;height:150px;padding: 10px;">
                            <div style="box-shadow: 10px 10px 5px #888888;height: 130px;border: 1px solid darkgray;">
                                <div class="food_title">
                                    {{food.name}}
                                </div>
                                <div class="food_detail">
                                    食品类别：{{food.type}}<br>
                                    营养类型：{{food.tag}}<br>
                                    购买价格：{{food.price}}元<br>
                                    是否清真：{{food.is_muslim}}
                                </div>
                                <el-button size="mini" type="danger" @click="handle_food_delete(food.id)">点击删除</el-button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>



        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    import axios from 'axios'
    export default {
        name: "foodcalendar",
        mounted(){
            this.get_calendar();
        },
        data(){
            return{
                add_food_info_dialog_visible:false,
                add_food_info_dialog_rules:{
                    day:[{required: true, message: '请选择日期', trigger: 'blur' }],
                    time:[{required: true, message: '请选择时间', trigger: 'blur' }],
                    type:[{required: true, message: '请选择类别', trigger: 'blur' }],
                    tag:[{required: true, message: '请选择营养类型', trigger: 'blur' }],
                    name:[{required: true, message: '请输入食品名称', trigger: 'blur' }],
                    price:[{required: true, message: '请输入食品价格', trigger: 'blur' },
                        { type: 'number', message: '价格必须为数字值'}],
                    is_muslim:[{required: true, message: '请选择是否清真', trigger: 'blur' }],
                },
                add_food_info_dialog_data:{
                    day:"",
                    time:"",
                    type:"",
                    tag:"",
                    name:"",
                    price:'',
                    is_muslim:'',

                },
                calendar_data:{
                    chosen_day:"周一"
                },
                breakfast_list:[

                ],
                lunch_list:[

                ],
                dinner_list:[
                ],
            }
        },
        methods: {
            add_food_info(form_name) {
                this.$refs[form_name].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认进行添加?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                method:'post',
                                url:'/api/food_calendar_page/add_food_info',
                                data:qs.stringify(this.$data.add_food_info_dialog_data),
                            }).then(res=>{
                                if(res.data.rs===true) {
                                    this.$message({
                                        type: 'success',
                                        message: '添加成功!',
                                    });
                                    this.$data.add_food_info_dialog_visible = false;
                                    this.refresh_calendar();
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: '添加失败：'+res.data.errMsg,
                                    });
                                }
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消添加'
                            });
                        });
                    } else {
                        return false;
                    }
                });

            },
            refresh_calendar(){
                this.get_calendar();
            },
            handle_change_chosen_day() {
                this.get_calendar();
            },
            get_calendar() {
                axios({
                    method:'post',
                    url:'/api/food_calendar_page/get_calendar',
                    data:qs.stringify({"day":this.$data.calendar_data.chosen_day}),
                }).then(res=>{
                    if(res.data.rs===true) {
                        this.$data.breakfast_list=res.data.data.breakfast_list;
                        this.$data.lunch_list=res.data.data.lunch_list;
                        this.$data.dinner_list=res.data.data.dinner_list;
                    }else{
                        this.$message({
                            type: 'error',
                            message: '获取膳食日历失败：'+res.data.errMsg,
                        });
                    }
                });
            },
            handle_food_delete(food_id) {
                this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/api/food_calendar_page/delete_food',
                        data:qs.stringify({"id":food_id}),
                    }).then(res=>{
                        if(res.data.rs===true) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                            this.refresh_calendar();
                        }else{
                            this.$message({
                                type: 'error',
                                message: '删除失败：'+res.data.errMsg,
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },

    }
</script>

<style scoped>
.food_title{
    text-align: center;
    font-size: 20px;
    font-weight: bold
}.food_detail{
     text-align: left;
     font-size: 12px;
     padding: 5px
 }
</style>